
<template>
<!-- 
  网页三个部分 html + css + js
  template结构 + style样式 + script行为
  vue2 template中只有一个根元素 - 最外面只有一个元素 俗称根元素
 -->
 <div>
  <div>123</div>
  <div>456</div>
  <div class="box">
    <div class="son">obj</div>
  </div>
  <h1>a - {{ a }}</h1>
  <h1>b - {{ b }}</h1>
  <h1>student - {{ student.age }}</h1>
  <!-- list数组第二项对象的人名 -->
  <h1>list - {{ list[1].name }}</h1>
 </div>
</template>

<script>
console.log('hello vue');
const obj = {a: 1, b: 2}
console.log(obj);
// eslint - 格式化 + 校验 比如你声明了变量没有用
// prettier - 格式化
/**
 * 库和框架的区别
 * 库 第三方库 不在赘述
 * 框架 一套完整的解决方案 一定的规则 我们要按照他的规则规范开发
 * 0. export default 默认导出一个对象
 * 1. data属性 - 必须是个函数
 *  {
 *    a: 1,
 *    b: 2,
 *    fn: function() {} => fn(){}
 *  }
 * 2. 函数返回一个对象 这个对象代表的vue提供的数据
 * 3. 使用插值表达式 双大括号语法 可以在模板中渲染数据
 */
export default {
  data() {
    return {
      a: 1,
      b: true,
      student: {
        name: 'zs',
        age: 18
      },
      list: [
        {name: 'ls', age: 20},
        {name: 'ww', age: 25}
      ]
    }
  },
}
</script>


<style lang="less">
// lang language
.box {
  width: 100px;
  height: 100px;
  background-color: pink;
  .son {
    width: 50px;
    height: 50px;
    background-color: yellow;
  }
}
</style>
